<!DOCTYPE html>
<html lang="zh-CN" style="font-size: 34.722px;"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>骡窝窝积分商城</title>
    <link rel="stylesheet" type="text/css" href="/mall/css/base.css">
    <link rel="stylesheet" type="text/css" href="/mall/css/shopcar.css">
    <link rel="stylesheet" type="text/css" href="/mall/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="/mall/css/loaders.min.css">
    <link rel="stylesheet" type="text/css" href="/mall/css/loading.css">
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/mall/js/jquery.min.js" type="text/javascript"></script>
    <script src="/mall/js/rem.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage");
            $(".loading").fadeOut(300);
        })

        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            var id;
            var ids = [];
            var i = 0;
            var num = 0;    //每项商品数量
            var productId;
            /** 根据用户id获取该用户的购物车信息**/
            $.get("/users/getShoppingCar/" ,{userId:user.id,pageSize: 5}, function (data) {
                    console.log(data);
                    $(".warp").renderValues(data, {
                        getProductId: function (item, value) {
                            $(item).attr("data-eid", value);
                        },
                        getId: function (item, value) {
                            $(item).attr("data-pid", $(item).data("pid") + value);  //给checkbox绑上商品id
                        }
                    });

                    $("input[name='sex']").attr("data-pid", data.id);
                    // 找到勾选按钮，绑定事件
                    $('input[type="checkbox"]').click(function () {
                        ids[i] = $($($(this).closest("div").parent()).parent()).find("i").data("eid");
                        i++;
                        total();
                    });

                    /** 找到加减按钮,绑定点击事件 ckw**/
                    $('.list ul img').click(function () {
                        //获取匹配的第二个元素 1为索引
                        var val = $(this).parent().parent().children().eq(1);
                        productId = $($($($(this).closest("div")).parent()).find("i")).data("eid");
                        if ($(this).parent().index()) {
                            val.html(parseInt(val.html()) + 1);
                            num = parseInt(val.html());
                        } else {
                            val.html(val.html() > 1 ? parseInt(val.html()) - 1 : 1);
                            num = parseInt(val.html());
                        }
                        total();
                    });

                    /** 找到删除按,绑定点击事件 ckw**/
                    $('.icon-lajixiang').click(function () {
                        var self = this;
                        var id = $(self).data("eid");   //购物车id
                        $(document).dialog({
                            type: 'confirm',
                            content: '亲亲,你确定要删除?',
                            onClickConfirmBtn: function (data) {
                                //确认购物车清单删除商品
                                $.ajax({
                                    type: "DELETE",
                                    url: "/users/deleteShoppingCar/" + id,
                                    success: function () {
                                        $(self).parent().parent().parent().parent().remove();
                                    }
                                })

                            }
                        });

                        total(); //计算总积分的函数调用
                    });

                    var datalist = [];
                    var j = 0;
                    /** 计算总积分 ckw**/
                    var count = 0;
                    function total() {

                        $('.list').map(function (index, item) {
                            var $el = $(item);
                            //如果勾选了
                            if ($el.find('input[type="checkbox"]').is(":checked")) {
                                count += parseInt($el.find('#jifen').html()) * parseInt($el.find('.zuo li').eq(1).html());
                                jQuery.ajaxSettings.traditional = true;
                                //如果勾选了,发ajax修改该商品数量
                                $.ajax({
                                    type: 'PUT',
                                    url: "/users/changNum",
                                    data: {number: num, id: productId},
                                })
                                //获得商品ids
                                /*$.get("/persons/getId", {ids: ids}, function (data) {
                                    //给商品id
                                    datalist[j] = data;
                                    j++;
                                })*/
                            }
                        });

                        //没勾选清零合计积分
                        $('.settlement span').html(count + '积分');
                    }


                $(".db").click(function () {
                    var temp = "";
                    //获取被勾选的商品id
                    var datas =[];  //会打印两遍???????????????????  放出来就好了
                    var temp = "";
                    datas = $("input[name='sex']:checked");
                    for (var i=0; i < datas.length;i++){
                        temp += "ids" + i + "=" + $(datas[i]).data("pid") + "&";
                    }

                    if (count > 0) {
                        location.href = "/mine/mallOrder.html?" + temp;
                    }
                })

                }

            )
        })
    </script>
</head>

<body>

<!--loading页开始-->
<div class="loading loader-chanage" style="opacity: 1;">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->


<!--header star-->
<header class="mui-bar mui-bar-nav" id="header" style="background-color: #7587ff">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <h4>购物车</h4>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <!--购物车商品项循环-->
    <div class="shopcar clearfloat" render-loop="list" ><div class="list clearfloat fl">

        <div class="xuan clearfloat fl">
            <div class="radio">
                <label>          <!--checkbox-->            <!--33-->
                    <input type="checkbox" name="sex" data-pid="0" render-key="list.id" render-fun="getId">
                </label>
            </div>
        </div>

        <a href="javascript:void(0)">

            <div class="tu clearfloat fl">
                <span></span>
                <img render-src="list.product.imgUrl" src="/mall/images/2f6.jpg">
            </div>

            <div class="right clearfloat fl">
                <p class="tit over" render-html="list.product.productName"> </p>
                <p class="jifen over"><samp id="jifen" render-html="list.product.credits"> </samp>积分</p>
                <div class="bottom clearfloat">
                    <div class="zuo clearfloat fl">
                        <ul>
                            <li><img src="/mall/images/jian.jpg"></li>  <!--减-->
                            <li render-html="list.num">1</li>
                            <li><img src="/mall/images/jia.jpg"></li>   <!--加-->
                        </ul>
                    </div>
                    <i class="iconfont icon-lajixiang fr" render-key="list.id" render-fun="getProductId" data-eid="33"></i>
                </div>
            </div>

        </a>

    </div>

    </div>


</div>

<!--settlement star-->
<div class="settlement clearfloat">
    <div class="zuo clearfloat fl box-s">
        合计：<span>0积分</span>
    </div>
    <a type="button" class="fl db">
        立即结算
    </a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="../mall6.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li class="active">
            <a href="shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->


</body>
</html>